<template>
  <div class="input-container">
    <div class="title">
      <img src="@/assets/logo_back.png" class="title_back" @click="handleBack" />
      <span class="title_text">绑定登录名</span>
    </div>

    <div class="conclusion">
      <img src="@/assets/point.png" />
      <span>微信授权成功，请输入启程系统中已存在的登录名和密码</span>
    </div>
    <div class="input-text">
      <p class="text-tips" style="margin: 16px 0 10px">登录名</p>
      <input
        class="input-name"
        type="text"
        v-model="form.userName"
        placeholder="请输入登录名"
        @blur="userNameBlur"
        :class="{ 'input-name-error': rules.userName == false }"
        :maxlength="20"
      />
      <div class="error-text" v-if="rules.userName == false">请输入4至12位用户名</div>

      <p class="text-tips" style="margin: 20px 0 10px">密码</p>
      <a-input-password
        class="input-name"
        v-model="form.password"
        placeholder="请输入密码"
        @blur="passwordBlur"
        @keydown.enter="handleSubmit"
        :max-length="20"
      />
    </div>

    <div class="submit-operate">
      <a-spin :loading="loading">
        <button class="submit-btn" :disabled="!rules.userName || !rules.password" @click="handleSubmit">创建绑定关系</button>
      </a-spin>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { bindUserWxQrLogin } from '@/api/user'
  import { Message, Modal } from '@arco-design/web-vue'
  import useUserStore from '@/store/modules/user'

  const props = defineProps({
    openid: String,
  })
  const emits = defineEmits(['changeIndex', 'login2GetUser'])

  const userStore = useUserStore()
  const form = ref({})
  const rules = ref({
    userName: true,
    password: true,
  })
  const userNameBlur = () => {
    if (form.value.userName) {
      if (form.value.userName.length < 4 || form.value.userName.length > 20) {
        rules.value.userName = false
      } else {
        rules.value.userName = true
      }
    }
  }
  const passwordBlur = () => {
    if (!form.value.password) {
      rules.value.password = false
    } else {
      rules.value.password = true
    }
  }

  // 返回上一步
  const handleBack = () => {
    emits('changeIndex', 1)
  }

  // 提交
  const loading = ref(false)
  const handleSubmit = () => {
    if (!form.value.userName) {
      Message.warning('登录名不能为空')
      return
    }
    if (!form.value.password) {
      Message.warning('密码不能为空')
      return
    }
    loading.value = true
    bindUserWxQrLogin({
      userName: form.value.userName,
      password: form.value.password,
      openid: props.openid || '123',
    })
      .then((res) => {
        if (res.code == 200) {
          const { status, statusCode, message } = res.result
          if (status) {
            if (statusCode == 30) {
              Modal.confirm({
                title: '提示',
                simple: true,
                content: '该登录名已绑定其他微信，请先解绑后再尝试重新绑定新的微信。',
                cancelText: '取消',
                okText: '登录去解绑',
                onOk: () => {
                  // 去登录
                  emits('login2GetUser', 'openUserInfo')
                  userStore.login2Unbind = true
                },
              })
              return
            }
            Message.success('绑定成功')
            // 去登录
            emits('login2GetUser')
          } else {
            Message.error(message)
          }
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
</script>

<style lang="less" scoped>
  .input-container {
    width: 398px;
    margin: 0 auto;
    .title {
      display: flex;
      margin-left: -10px;

      &_back {
        margin-right: 12px;
        width: 48px;
        height: 48px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      &_text {
        font-size: 32px;
        font-weight: 600;
        color: #1e1e1e;
      }
    }

    .conclusion {
      margin-top: 24px;
      display: flex;
      align-items: center;
      line-height: 22px;
      img {
        height: 16px;
        margin-right: 3px;
      }
      p {
        font-size: 14px;
        font-weight: 400;
        color: #1e1e1e;
      }
    }

    .input-text {
      .input-name {
        width: 398px;
        height: 50px;
        border-radius: 3px;
        font-size: 14px;
        font-weight: 400;
        opacity: 1;
        border: 1px solid #c5c6cd;
        outline-style: none;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 18px;
      }
      .input-name:focus {
        outline: none;
        border: 1px solid #165dff;
      }
      .input-name-error {
        outline: none;
        border: 1px solid #ff5b5a;
      }
    }
    .over-operate {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .auto-login {
        display: flex;
        align-items: center;
        .input-checkbox {
          width: 13px;
          height: 13px;
          background: #ffffff;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #b2b6c0;
          outline: none;
        }
      }
      .forgot-password {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #165dff;
        cursor: pointer;
      }
    }
    .submit-operate {
      margin-top: 52px;
      .submit-btn {
        width: 398px;
        height: 50px;
        font-size: 16px;
        color: #ffffff;
        border-radius: 2px 2px 2px 2px;
        background: #165dff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-weight: 400;
        line-height: 1.5715;
        white-space: nowrap;
        outline: none;
        cursor: pointer;
        transition: all 0.1s cubic-bezier(0, 0, 1, 1);
        &:disabled {
          background: rgba(22, 93, 255, 0.3);
        }
      }
    }
  }
  .error-text {
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff5b5a;
    line-height: 22px;
    margin-top: 11px;
  }
</style>
